<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>案件预警</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/custom.form.css">
    <style>
        #searchParam {
            margin-left: 10px;
        }
    </style>
    <!-- 公共样式建议： -->
    <style>
        .form-row {
            display: flex;
            align-items: flex-start;
            margin-bottom: 16px;
        }

        .form-label {
            width: 100px;
            line-height: 38px;
            margin-right: 8px;
            white-space: nowrap;
            text-align: right;
        }

        .radio-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }

        .layui-form-checkbox-label {
            font-size: 14px;
            color: #555;
            line-height: 1;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
        }

        /* 设置 select 渲染后的容器宽度 */
        .layui-form-select.gzd-custom {
            width: 360px !important;
        }

        /* 设置显示框的 input 宽度和右 padding，避免小三角重叠 */
        .layui-form-select.gzd-custom .layui-select-title input {
            width: 100% !important;
            padding-right: 30px !important;
            box-sizing: border-box;
        }

    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header"></div>
                <div class="layui-card-body">
                    <div class="cqyj_table_div">
                        <div id="searchParam">
                            <div class="layui-form-item">
                                <div class="layui-input-inline layui-form">
                                    <label for="checkKeShi"></label>
                                    <select id="checkKeShi"></select>
                                </div>
                                <div class="layui-input-inline layui-form">
                                    <label for="dayType"></label>
                                    <select id="dayType">
                                        <option value="0">请选择超期天数</option>
                                        <option value="0" th:selected="${dayType}==0">全部</option>
                                        <option value="1" th:selected="${dayType}==8">30天以下</option>
                                        <option value="1" th:selected="${dayType}==1">30天</option>
                                        <option value="2" th:selected="${dayType}==2">40天</option>
                                        <option value="3" th:selected="${dayType}==3">50天</option>
                                        <option value="4" th:selected="${dayType}==4">60天</option>
                                        <option value="5" th:selected="${dayType}==5">70天</option>
                                        <option value="6" th:selected="${dayType}==6">80天</option>
                                        <option value="7" th:selected="${dayType}==7">90天以上</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline layui-form">
                                    <label for="ajzt"></label>
                                    <select id="ajzt">
                                        <option value="0">请选择案件状态</option>
                                        <option value="0">全部</option>
                                        <option value="2">在查</option>
                                        <option value="3">在审</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline ">
                                    <button class="layui-btn" onclick="search()" id="search">查询</button>
                                </div>
                            </div>
                        </div>
                        <table class="layui-hide" id="cqyj_table" lay-filter="cqyj_table"></table>
                    </div>
                    <!--工作调度-->
                    <div id="ddContent" style="display: none">
                        <div style="display: flex; justify-content: center; align-items: center; height: 100%; width: 100%;">
                            <form class="layui-form" action="" lay-filter="info" style="margin-top: 30px">
                                <!-- 调度任务 -->
                                <div class="form-row">
                                    <label for="gzddSelect" class="form-label">请选择调度任务:</label>
                                    <select id="gzddSelect"></select>
                                </div>

                                <div class="form-row">
                                    <!-- 左侧 label 与第一项对齐 -->
                                    <label class="form-label">选择角色:</label>

                                    <!-- 右侧复选框列表垂直排列 -->
                                    <div style="margin-top:  10px">
                                        <div class="radio-item">
                                            <input type="checkbox" name="role" value="检查人" title="检查人 :"
                                                   lay-skin="primary" lay-filter="role"
                                                   checked style="width: auto; margin-right: 8px;">
                                            <span id="jcryName" class="name-display layui-form-checkbox-label"></span>
                                        </div>

                                        <div class="radio-item" style="margin-top:  22px">
                                            <input type="checkbox" name="role" value="审理人" title="审理人 :"
                                                   lay-skin="primary" lay-filter="role"
                                                   style="width: auto; margin-right: 8px;">
                                            <span id="slryName" class="name-display layui-form-checkbox-label"></span>
                                        </div>

                                        <div class="radio-item" style="margin-top: 22px">
                                            <input type="checkbox" name="role" value="执行人" title="执行人 :"
                                                   lay-skin="primary" lay-filter="role"
                                                   style="width: auto; margin-right: 8px;">
                                            <span id="zxryName" class="name-display layui-form-checkbox-label"></span>
                                        </div>
                                    </div>
                                </div>
                                <!-- 指定人 -->
                                <div class="form-row">
                                    <label class="form-label" for="zdrSelect">选择指定人:</label>
                                    <div id="zdrSelect" style="width: 80%"></div>  <!-- 这里必须是 div，而不是 select -->
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="ajxx_record_div" hidden>
                        <table class="layui-hide" id="flowRecord_table" lay-filter="flowRecord_table"></table>
                    </div>
                    <div class="log_record_div" hidden>
                        <table class="layui-hide" id="logRecord_table" lay-filter="logRecord_table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>


<script type="text/html" id="ajxxtool">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="ajxxRecord">流转记录</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="logRecord">日志调度记录</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="createDd">一键调度</a>
</script>

<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary" lay-event="returnBack">返回</button>
    </div>
</script>
<script type="text/html" id="toolbar_log">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary" lay-event="returnBack">返回</button>
    </div>
</script>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script src="/layui-ext/selectM/selectM.js"></script>

<script language="JavaScript" src="/newmain/js/bizjs/gy.js"></script>
<script th:inline="none">
    //获取token
    let token = CoreUtil.getData("access_token");
    //地址栏转义token中的#号
    let tokenQuery = token.replace("#", "%23");
    let tableIns1;
    let table = layui.table;
    let form = layui.form;
    let layer = layui.layer;
    let $ = jQuery = layui.jquery;
    let laydate = layui.laydate;
    let tree = layui.tree;
    let startTime = null;
    let endTime = null;
    var xmSelect = layui.xmSelect;
    var zdrSelect;
    layui.config({
        base: '/'
    }).extend({
        eleTree: 'layui-ext/eleTree/eleTree',
        xmSelect: 'layui/xm-select' // 这里添加 xmSelect

    }).use(['table', 'laypage', 'layer', 'laydate', 'tree', 'eleTree', 'xmSelect'], function () {
        // 指定人下拉选
        CoreUtil.sendPost("/workflow/activity/querySelectJcr", JSON.stringify(null), function (res) {
            if (res.code === 0) {
                let value = res.data;
                let dataList = [];
                // 转换数据格式
                for (let i in value) {
                    dataList.push({
                        name: value[i].swryxm,  // 显示的名称
                        value: value[i].swryxm  // 选项的值
                    });
                }

                // 使用 xm-select 渲染下拉框
                zdrSelect = xmSelect.render({
                    el: '#zdrSelect',  // 绑定的容器
                    filterable: true, // 开启搜索功能
                    theme: {
                        color: '#009688', // 自定义主题色
                    },
                    tips: '请选择指定人', // 提示文本
                    data: dataList, // 动态填充选项数据
                });

            } else {
                layer.msg(res.msg);
                return false;
            }
        });

        let whereParams = {
            "username": "0CF9F5103FA0429B8C0224AF56A1D63B",
            "password": "0CF9F5103FA0429B8C0224AF56A1D63B",
            "serviceId": "0002",
            "param": {
                "cqyjDetailParams": {
                    "swjgDm": "0",
                    "dayType": $("#dayType").val(),
                    "ajzt": $("#ajzt").val()
                }
            }
        };
        tableIns1 = table.render({
            elem: '#cqyj_table'
            , contentType: 'application/json'
            , headers: {"authorization": token}
            , where: whereParams
            , page: true
            , url: '/attention/cqyjdetail' //数据接口
            , method: 'POST'
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                    "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                }
            }
            , cols: [
                [
                    // {type: 'checkbox', fixed: 'left'},
                    {field: 'jcajxxuuid', title: '金三案件信息表主键', hide: true},
                    {field: 'jcajbh', title: '案件编号', align: 'center', sort: true},
                    {field: 'nsrmc', title: '纳税人名称', align: 'center', sort: true},
                    {field: 'nsrsbh', title: '纳税人识别号', align: 'center', sort: true},
                    {field: 'larq', title: '立案日期', align: 'center', sort: true},
                    {field: 'jcbmmc', title: '所在科室', align: 'center', sort: true},
                    {field: 'ajztmc', title: '案件状态', align: 'center', sort: true},
                    {field: 'jcry', title: '检查人员', align: 'center', sort: true},
                    {field: 'slry', title: '审理人员', align: 'center', sort: true},
                    {toolbar: '#ajxxtool', title: '操作', width: 280, align: 'center', sort: true, fixed: 'right'}
                ]
            ]
            , toolbar: '#toolbar1',
            done: function (res, curr, count) {
                // 渲染完成后的回调函数
                let data = res.data; // 获取表格渲染的数据
                // 遍历表格数据，根据相应字段设置不同颜色
                for (let i = 0; i < data.length; i++) {
                    let overdueDays = data[i].bh; // 获取超期天数字段
                    let tr = $('#cqyj_table').next().find('tbody tr:eq(' + i + ')'); // 获取当前行对应的 tr 元素
                    // 定义颜色映射
                    const colors = {
                        1: '#98FB98',   // 浅绿色
                        2: '#98FB98',   // 浅绿色
                        3: '#98FB98',   // 浅绿色
                        4: '#98FB98',   // 浅绿色
                        5: 'orange',    // 橙色
                        6: 'orange',    // 橙色
                        7: '#f33636',   // 红色
                        8: '#ADD8E6'    // 浅蓝色
                    };
                    // 设置颜色
                    if (colors[overdueDays]) {
                        tr.css('background-color', colors[overdueDays]);
                    }
                }
            }
        });
        //初始化检查科室查询条件
        CoreUtil.sendPost("/attention/gy/getcurrentswjgjcks", null, function (res) {
            let datas = res.data;
            let options = "<option value = '0'>请选择检查科室</option><option value = '0' selected >全局</option>";
            for (let i = 0; i < datas.length; i++) {
                options += '<option value="' + datas[i].swjgDm + '">' + datas[i].swjgjc + '</option>';
            }
            $('#checkKeShi').append(options);
            // 更新select渲染
            form.render('select');
        });
        //table按钮
        table.on('tool(cqyj_table)', function (obj) {
            var data = obj.data;
            console.log("data", data)
            switch (obj.event) {
                case 'ajxxRecord':
                    table.render({
                        elem: '#flowRecord_table'
                        , contentType: 'application/json'
                        , headers: {"authorization": token}
                        , where: {relevance: data.jcajxxuuid}
                        , url: '/attention/attentionCase/flowRecord' //数据接口
                        , method: 'POST'
                        , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                            return {
                                "code": res.code, //解析接口状态
                                "msg": res.msg, //解析提示文本
                                "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                                "data": CoreUtil.isEmpty(res.data) ? null : res.data //解析数据列表
                            }
                        }
                        , cols: [
                            [
                                {field: 'category', title: '类型', width: 250, align: 'center', sort: true},
                                {
                                    field: 'date',
                                    title: '日期',
                                    width: 120,
                                    align: 'center',
                                    sort: true,
                                    templet: function (d) {
                                        return layui.util.toDateString(d.date, 'yyyy-MM-dd');
                                    }
                                },
                                {field: 'czr', title: '操作人', width: 140, align: 'center', sort: true},
                                {field: 'ajbh', title: '案件编号', width: 200, align: 'center', sort: true},
                                {field: 'nsrmc', title: '企业名称', width: 250, align: 'center', sort: true},
                                {
                                    field: 'czsj',
                                    title: '操作时间',
                                    width: 120,
                                    align: 'center',
                                    templet: function (d) {
                                        return layui.util.toDateString(d.czsj, 'yyyy-MM-dd');
                                    }
                                },
                                {field: 'bz', title: '内容', width: 250, align: 'center', sort: true},
                            ]
                        ]
                        , toolbar: '#toolbar'
                    });
                    $(".ajxx_record_div").show();
                    $(".cqyj_table_div").hide();
                    break;
                case 'logRecord':
                    //日志记录
                    //加载flowrecord
                    console.log("我进来了吗")
                    skipOpen("/index/statistics/ajlogrecord?relevance=" + data.jcajxxuuid, "11001", "日志记录");
                    break;
                case 'createDd':
                    //创建调度
                    console.log("data:", data)
                    const dd_jcry = data.jcry;
                    const dd_slry = data.slry;
                    const dd_zxry = data.zxry;
                    // 设置检查人
                    document.getElementById('jcryName').innerText = dd_jcry ? dd_jcry : '无';
                    // 设置审理人
                    document.getElementById('slryName').innerText = dd_slry ? dd_slry : '无';
                    // 设置执行人
                    document.getElementById('zxryName').innerText = dd_zxry ? dd_zxry : '无';
                    // 在此处输入 layer 的任意代码
                    layer.open({
                        type: 1, // page 层类型
                        area: ['700px', '500px'],
                        title: '一键调度',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        maxmin: true, // 允许全屏最小化
                        anim: 0, // 0-6 的动画形式，-1 不开启
                        content: $('#ddContent'),
                        btn: ['确定', '取消'], // 自定义按钮
                        yes: function (index, layero) {
                            // 调度任务判断
                            const gzddSelect = $("#gzddSelect").val();
                            if (CoreUtil.isEmpty(gzddSelect)) {
                                layer.alert('请选择调度任务！', {icon: 2, title: '提示'});
                                return false;
                            }
                            validateReceiverSelection();
                            //传递
                            let mapArr = {
                                jcry: $('#jcryName').text().trim(),  // 检查人名字
                                slry: $('#slryName').text().trim(),  // 审理人名字
                                zxry: $('#zxryName').text().trim(),  // 执行人名字
                                zdr: []
                            };

                            // 取指定人 xmSelect 的选中值，放入数组
                            if (typeof zdrSelect !== 'undefined' && typeof zdrSelect.getValue === 'function') {
                                let selectedZdr = zdrSelect.getValue(); // 返回数组 [{name:'', value:''}, ...]
                                mapArr.zdr = selectedZdr.map(item => item.name); // 只保存名字数组
                            }

                            CoreUtil.sendPost("/workflow/log/gyYjdd", mapArr, function (res) {
                                if (res.code === 0) {
                                    layer.msg("一键调度成功！", {icon: 1});
                                    // 执行提交操作后关闭弹层
                                    layer.close(index);
                                } else {
                                    layer.msg(res.msg, {icon: 2});
                                    return false;
                                }
                            });
                        }
                    });
                    break;

            }
        });
        table.on('toolbar(flowRecord_table)', function (obj) {
            $(".ajxx_record_div").hide();
            $(".cqyj_table_div").show();
        });
        table.on('toolbar(logRecord_table)', function (obj) {
            $(".log_record_div").hide();
            $(".cqyj_table_div").show();
        });
    });

    //执行查询
    function search() {
        //这里以搜索为例
        let whereParams = {
            "username": "0CF9F5103FA0429B8C0224AF56A1D63B",
            "password": "0CF9F5103FA0429B8C0224AF56A1D63B",
            "serviceId": "0002",
            "param": {
                "cqyjDetailParams": {
                    "swjgDm": $("#checkKeShi").val(),
                    "dayType": $("#dayType").val(),
                    "ajzt": $("#ajzt").val()
                }
            }
        };
        tableIns1.reload({
            where: whereParams
            , page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }
</script>
</html>